<template>
  <div class="user-info-page">
    <div class="oj-user-info oj-user-info-page">
      <div class="oj-user-info-body">
        <el-form
          :model="userDetailForm"
          label-position="top"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="oj-user-info-subtitle-box">
            <div class="oj-user-info-subtitle">
              <span class="oj-user-info-dot">
                基本信息
              </span>
              <div class="opt-box">
                <el-button
                  class="user-info-edit"
                  v-if="isDisabled()"
                  type="text"
                  @click="changeState('updating')"
                >
                  编辑
                </el-button>
                <el-button
                  class="user-info-edit"
                  v-if="!isDisabled()"
                  type="text"
                  @click="changeState('normal')"
                >
                  取消
                </el-button>
                <el-button
                  class="user-info-back"
                  type="text"
                  @click="goBack()"
                >
                  返回
                </el-button>
              </div>
            </div>

          </div>
          <div class="ku-user-section">
            <el-form-item prop="nickName">
              <div class="photo-image-box">
                <div class="photo-image">
                  <div class="left">
                    <img
                      width="80px"
                      v-if="!userDetailForm.avatar"
                      height="80px"
                      src="@/assets/user/head_image.png"
                    >
                    <img
                      width="80px"
                      v-else
                      height="80px"
                      :src="userDetailForm.avatar"
                    >
                  </div>
                  <div
                    class="right"
                    v-if="!userDetailForm.avatar"
                  >
                    <div class="bold">上传你的个人头像</div>
                    <div class="normal">上传你的个性头像展示你的个人风格</div>
                  </div>
                </div>
                <div v-if="!isDisabled()">
                  <el-upload
                    :action="uploadUrl"
                    :headers="headers"
                    :on-error="handleUploadError"
                    :on-success="handleUploadSuccess"
                    :show-file-list="false"
                    :before-upload="handleUploadBefore"
                  >
                    <el-button type="info">{{ userDetailForm.avatar ? '更换头像' : '上传头像' }}</el-button>
                    <template #tip> </template>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="昵称"
              prop="nickName"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.nickName"
                autocomplete="off"
                placeholder="请填写您的昵称"
                maxlength="8"
              ></el-input>
              <span
                :class="userDetailForm.nickName ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.nickName || "请填写您的昵称" }}
              </span>
            </el-form-item>
            <el-form-item
              label="性别"
              prop="sex"
            >
              <el-radio-group
                v-model="userDetailForm.sex"
                v-if="!isDisabled()"
              >
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
              <span
                :class="userDetailForm.sex ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.sex == null ? "请选择您的性别" : +userDetailForm.sex == 1 ? "男" : "女" }}
              </span>
            </el-form-item>
            <el-form-item
              label="学校"
              prop="schoolName"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.schoolName"
                autocomplete="off"
                placeholder="请填写您的学校名称"
              ></el-input>
              <span
                :class="userDetailForm.schoolName ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.schoolName || "请填写您的学校名称" }}
              </span>
            </el-form-item>
            <el-form-item
              label="专业"
              prop="majorName"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.majorName"
                autocomplete="off"
                placeholder="请填写您的专业名称"
              ></el-input>
              <span
                :class="userDetailForm.majorName ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.majorName || "请填写您的专业名称" }}
              </span>
            </el-form-item>
            <el-form-item
              label="手机"
              prop="phone"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.phone"
                autocomplete="off"
                placeholder="请填写常用手机号"
              ></el-input>
              <span
                :class="userDetailForm.phone ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.phone || "请填写常用手机号" }}
              </span>
            </el-form-item>
            <el-form-item
              label="常用邮箱"
              prop="email"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.email"
                autocomplete="off"
                placeholder="请填写常用邮箱"
              ></el-input>
              <span
                :class="userDetailForm.email ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.email || "请填写常用邮箱" }}
              </span>
            </el-form-item>
            <el-form-item
              label="微信号码"
              prop="wechat"
            >
              <el-input
                v-if="!isDisabled()"
                type="text"
                v-model="userDetailForm.wechat"
                autocomplete="off"
                placeholder="请填写微信号码"
              ></el-input>
              <span
                :class="userDetailForm.wechat ? 'right-info' : 'right-info gray'"
                v-else
              >
                {{ userDetailForm.wechat || "请填写微信号" }}
              </span>
            </el-form-item>

            <el-form-item
              label="个人介绍"
              prop="introduce"
            >
              <el-input
                v-if="!isDisabled()"
                :rows="5"
                type="textarea"
                v-model="userDetailForm.introduce"
                autocomplete="off"
                placeholder="请填写个人介绍"
                maxlength="80"
                show-word-limit
              ></el-input>
              <span
                :class="userDetailForm.introduce ? 'right-info intro' : 'right-info intro gray'"
                v-else
              >
                {{ userDetailForm.introduce || "请用一段话介绍自己,该简介将会在您的个人主页展示" }}
              </span>
            </el-form-item>
          </div>
          <div
            class="ku-login-footer"
            v-if="!isDisabled()"
          >
            <el-button
              class="ku-login-footer-btn blue"
              type="primary"
              plain
              @click="editUser()"
            >保存</el-button>
            <el-button
              class="ku-login-footer-btn"
              type="info"
              plain
              @click="changeState('normal')"
            >取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getUserDetailService, updateUserService, updateUserAvatarService, getUserInfoService } from '@/apis/userApi'
  import { getToken } from '@/utils/cookie'
  import { uploadFileService } from '@/apis/fileApi'
  import router from '@/router'
  import { ElMessage } from 'element-plus';
  import { reactive, ref } from "vue"
  import { useUserStore } from '@/stores/user';
  const userStore = useUserStore()
  const userDetailForm = reactive({})
  const currentState = ref('normal')

  async function getUserDetail() {
    const userRef = await getUserDetailService()
    currentState.value = "normal"
    // userDetailForm = reactive(userRef.data)
    Object.assign(userDetailForm, userRef.data)
  }
  getUserDetail()

  function goBack() {
    router.go(-1)
  }

  function changeState(state) {
    currentState.value = state
  }

  function isDisabled() {
    return currentState.value === "normal"
  }

  async function editUser() {
    await updateUserService(userDetailForm)
    ElMessage.success("信息修改成功")
    getUserDetail()
    userStore.getUserInfo()
  }
  //http://127.0.0.1:19090/friend/file/upload
  const uploadUrl = ref("/dev-api/file/upload")

  const headers = ref({
    Authorization: "Bearer " + getToken(),
  })

  function handleUploadBefore(rawFile) {
    if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
      ElMessage.error("只能上传jpeg/jpg/png图片");
      return false;
    } else if (rawFile.size / 1024 / 1024 > 1) {
      ElMessage.error("上传图片最大不超过1MB!");
      return false;
    }
    return true;
  }

  async function handleUploadSubmit(file) {
    console.log(file);
    const fd = new FormData();
    fd.append("file", file.file);
    console.log(fd.get("file"));

    return await uploadFileService(fd)
  }

  async function handleUploadSuccess(res) {
    if (res.code !== 1000) {
      ElMessage.error(res.msg)
    } else {
      const userUpdateDTO = reactive({
        avatar: res.data.name
      })
      console.log(res.data.name);

      await updateUserAvatarService(userUpdateDTO)
      getUserDetail()
      userStore.getUserInfo() // 
      ElMessage.success("头像上传成功")
    }
  }

</script>

<style lang="scss" scoped>
  .back-btn-box {
    background: #fff;
    width: 100%;
    height: 48px;
    margin-bottom: 16px;

    .back-btn {
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      cursor: pointer;
      line-height: unset;

      i {
        margin-right: 6px;
        font-size: 16px;
        margin-top: 2.5px;
      }
    }
  }

  .user-info-page {
    background-color: rgba(247, 247, 247, 1);
    position: relative;
    overflow: hidden;

    :deep(.el-form) {
      .el-button--info {
        background: #f2f3f5;
        border: 1px solid #f2f3f5;
        color: #222;

        &:hover {
          background: #32C5FF;
          border: 1px solid #32C5FF;
          color: #fff;
        }
      }

      .el-form-item {
        max-width: 1120px;
        width: 100%;

        .el-form-item__label {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 18px;
          color: #222222;
          margin-bottom: 16px;
        }

        .photo-image-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding-bottom: 20px;
          border-bottom: 1px solid #ebebeb;

          .photo-image {
            display: flex;
            flex: 1;
            margin-right: 20px;

            img {
              border-radius: 50%;
            }

            .right {
              flex: 1;
              margin-left: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .bold {
                height: 25px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 18px;
                color: #222222;
                line-height: 25px;
                margin-bottom: 10px;
              }

              .normal {
                height: 22px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #999999;
                line-height: 22px;
              }
            }
          }
        }

        .el-input,
        .el-select,
        .el-radio-group {
          width: 100%;
          height: 44px;
          border-radius: 4px;
          outline-style: none;
          border: none;
          font-size: 16px;

          input {
            color: #222;
          }
        }

        .el-radio-group {

          border-bottom: 1px solid #ebebeb;
        }

        .el-input__wrapper {
          border: none;
          box-shadow: none;
          border-radius: 0;
          padding-left: 0;
          color: #222;
          border-bottom: 1px solid #ebebeb;

          &:hover {
            border-bottom: 1px solid #32c5ff;
          }
        }
      }
    }

    .oj-user-info {
      margin: 0 auto;
      max-width: 1520px;
      width: 100%;

      &.oj-user-info-page {
        background: #f7f7f7;
        margin-bottom: 30px;

        .user-info-back {
          cursor: pointer;
          color: #999999;
          font-size: 15px;
        }

        .user-info-edit {
          cursor: pointer;
          font-size: 15px;
          margin-left: auto;
        }

        .ku-user-section {
          background: #fff;
        }

        .oj-user-info-body {
          padding: 0;

          .oj-user-info-subtitle-box {
            padding: 30px 20px;
            padding-bottom: 0;

            .oj-user-info-subtitle {
              display: flex;
              align-items: center;
              height: 33px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 24px;
              color: #222222;
              line-height: 33px;
            }
          }
        }

        .ku-user-section {
          padding: 30px 24px;
          padding-bottom: 0;
        }

        .ku-user-real-info {
          margin-top: 0;
          margin-bottom: 0;
          padding-left: 24px;
          box-sizing: border-box;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid #f2f2f2;
        }

        .el-form-item__content {
          margin-left: 110px;
        }

        .ku-login-footer {
          text-align: left;
          padding-left: 24px;
          padding-bottom: 24px;
        }
      }

      .oj-user-info-title {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        width: 100%;
        /* 设置宽度为100%以确保水平居中 */
        height: 60px;
        font-size: 25px;
        text-indent: 20px;
        display: flex;
        align-items: center;
        margin: 20px 0 20px 0;
      }

      .oj-user-info-body {
        background-color: #fff;
        padding: 20px 20px 40px;
        border-radius: 8px;
      }

      .oj-user-info-subtitle {
        font-size: 16px;
        font-weight: 500;
        color: #222222;
        line-height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .ku-login-footer {
        text-align: center;
        margin-top: 30px;
      }

      .ku-login-footer-btn {
        width: 84px;
        height: 44px;
        border-radius: 3px;
        font-size: 15px;
        font-weight: 400;

        &.blue {
          background: #32C5FF !important;
          color: #fff;
        }
      }

      .ku-user-section {
        background-color: #f7f7f7;
        padding: 30px 38px;
        border-radius: 10px;
      }

      .oj-user-info-action {
        position: relative;
        height: 0;
      }

      .ku-user-validate-phone {
        display: inline-block;
        height: 40px;
        margin-left: 8px;
        color: #24c68b;
        font-weight: 700;
        cursor: pointer;
        user-select: none;
      }

      .ku-user-real-info {
        margin-top: 47px;
      }
    }
  }
</style>

<style lang="scss">
  .oj-user-info-page {
    .el-form-item__label {
      padding-right: 30px !important;
      color: #666;
    }

    .el-form {
      padding-bottom: 24px;
    }

    .right-info {
      display: inline-block;
      min-width: 90px;
      color: #222;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      width: 100%;
      border-bottom: 1px solid #f2f2f2;
      height: 44px;
      line-height: 44px;

      &.gray {
        color: #999;
      }
    }
  }
</style>